<!-- 单聊 -->
<template>
  <div class="w-full h-full flex flex-col">
    <h2>单聊</h2>
    <div class="flex flex-1 space-x-4 overflow-hidden">
      <div class="overflow-auto h-full space-y-4">
        <el-input v-model="message" type="textarea" placeholder="请输入内容" />
        <div class="flex space-x-4">
          <el-input v-model="peerId" placeholder="接收者 userId" size="large" />
          <el-button
            class="px-10"
            type="primary"
            size="large"
            @click="sendMessageFn"
          >
            发送
          </el-button>
        </div>
      </div>
      <div class="flex-1 border p-3 overflow-hidden">
        <ul
          v-if="list_message.length > 0"
          class="border h-full p-2 space-y-4 w-full overflow-auto"
        >
          <li
            v-for="(item, index) in list_message"
            :key="item.userId + '_' + index"
            :class="[
              'self-start w-full flex items-start',
              item.userId !== props.userId ? 'flex-row-reverse' : '',
            ]"
          >
            <el-tooltip :content="item.userId">
              <div class="w-12 h-12 rounded-full overflow-hidden">
                <!-- 其他人 -->
                <img
                  v-if="item.userId !== props.userId"
                  src="http://source.unsplash.com/100x100/?woman"
                  alt=""
                  class="w-full rounded-full"
                />
                <!-- 本人 -->
                <img
                  v-else
                  src="http://source.unsplash.com/100x100/?man"
                  class="w-full rounded-full"
                />
              </div>
            </el-tooltip>
            <div
              class="w-full p-4 mx-2 rounded-t-lg rounded-r-lg bg-neutral-300 shadow text-sm"
            >
              {{ item.content }}
            </div>
          </li>
        </ul>
        <el-empty v-else class=" py-0" description="暂无消息" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { onMounted, onUnmounted, ref } from "vue";
import AnyRTCLive, { AnyRTCLiveEvents } from "../../anyrtcLive";
import { ChatMessage } from "./liveType";

interface ChatProps {
  userId: string;
}
const props = defineProps<ChatProps>();
// 远端用户登录RTM的userId
const peerId = ref("");
// 发送消息
const message = ref("");
// 发送消息
const sendMessageFn = async () => {
  if (!peerId.value) {
    return ElMessage.error("请输入接收者 userId");
  }
  if (!message.value) {
    return ElMessage.error("请输入消息内容");
  }
  await AnyRTCLive.sendP2PMessage(
    peerId.value,
    JSON.stringify({
      content: message.value,
      type: "text",
    })
  );
  list_message.value.push({
    userId: props.userId,
    content: message.value,
    type: "text",
  });
  message.value = "";
  console.log("发送消息", peerId.value);
};

/** 信息列表 */
const list_message = ref<ChatMessage[]>([]);
const UserMessage: AnyRTCLiveEvents["UserMessage"] = (message, memberId) => {
  const { content, type } = JSON.parse(message.text);
  list_message.value.push({
    userId: memberId,
    content,
    type,
  });
};
onMounted(() => {
  AnyRTCLive.on("UserMessage", UserMessage);
});
onUnmounted(() => {
  AnyRTCLive.off("UserMessage", UserMessage);
});
</script>
